<template>
  <div id="app">
    <div>
      <el-menu
        style="height: 100%; width: 200px !important"
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#001529"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">导航一</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
    <router-view></router-view>
    <div id="container"></div>
  </div>
</template>
<script>
export default {
  methods: {
    handleSelect(key, keyPath) {
      if (key == 1) {
        this.$router.push({ path: "/main-m1" });
      } else if (key == 2) {
        this.$router.push({ path: "/main-m2" });
      } else if (key == 3) {
        this.$router.push({ path: "/app-vue/sub-m1" });
      } else {
        this.$router.push({ path: "/app-vue/sub-m2" });
      }
    },
  },
};
</script>
<style scoped>
#app {
  display: flex;
}
.main-box {
  width: 100%;
  height: 100%;
  display: flex;
}
.menu-box {
  height: 100%;
  width: 20%;
}
.content-box {
  width: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
</style>